<script setup lang="ts">
import { reactive, ref } from "vue"
const title = `通过TailWind快速实现<br>Github2021年年度
                    <a traget="_blank" href="https://octoverse.github.com/"><font>octoverse</font></a>`;
const datav = reactive([
    { num: 73, unit: '百万+', text: 'GitHub 上的开发人员总数', bg: 'bg-1' },
    { num: 16, unit: '百万+', text: '2021年新增用户', bg: 'bg-2' },
    { num: 84, unit: '百分之', text: '财富100强公司<br>使用GitHub Enterprise', bg: 'bg-0' },
    { num: 61, unit: '百万+', text: '创建的新存储库数量', bg: 'bg-0' },
    { num: 170, unit: '百万', text: '合并拉去请求', bg: 'bg-3' }
]);
</script>
<template>
    <section class="container max-w-screen-xl px-6 mx-auto 2xl:px-0">
        <div class="flex flex-wrap">
            <div class="flex w-1/2 p-20">
                <h2 class="font-sans text-2xl" v-html="title"></h2>
            </div>
            <div
                class="flex w-1/2 p-20 bg-octo-violet-primary-light"
                v-for="(item,index) in datav"
                :key="index"
                :class="item.bg"
            >
                <span class="inline-flex">
                    <span class="font-blimone text-9xl stacked-fractions">{{ item.num }}</span>
                    <span class="inline-flex flex-col">
                        <span class="p-4 ml-2 text-4xl font-blimone">{{ item.unit }}</span>
                        <span class="ml-6 font-thin text-1xl" v-html="item.text"></span>
                    </span>
                </span>
            </div>
        </div>
    </section>
</template>
<style lang="less">
.bg-0 {
    background-color: #fff;
}
.bg-1 {
    background-color: #f9f8ff;
}
.bg-2 {
    background-color: rgba(244, 248, 253, 1);
}
.bg-3 {
    background-color: rgba(240, 248, 246, 1);
}
font {
    color: #ff6900;
}
</style>